<template>
    <div>
        <div class="edit">
            <div class="container">
                <div class="head">
                    <div class="iconfont" @click="$router.back()">
                        &#xe624;
                    </div>
                    <h1>发布菜谱</h1>
                    <div></div>
                </div>
                <div class="picture">
                    <input type="file" accept="image/*" id="file" @change="image('tit',$event)">
                    <label for="file">+上传照片</label>
                    <img :src="obj.titImg" v-if="obj.titImg != ''">
                </div>
                <div class="title">
                    <div class="tit_txt">
                        <input type="text" placeholder="为菜谱起个名字" v-model="obj.titTxt">
                    </div>
                    <div class="tit_story">
                    <textarea placeholder="可以写写这道菜背后的故事" v-model="obj.titStory"></textarea>
                    </div>
                    <div class="grade">
                        <div class="hard">
                            <span>难度</span>
                            <select selectedIndex="-1" id="" v-model="hard">
                                <option value="">初级</option>
                                <option value="">中级</option>
                                <option value="">高级</option>
                            </select>
                        </div>
                        <div class="time">
                            <span>时间</span>
                            <select selectedIndex="-1" id="" v-model="time">
                                <option value="">10分钟左右</option>
                                <option value="">10~30分钟</option>
                                <option value="">30~60分钟</option>
                                <option value="">1小时以上</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="uls">
                        <h2>添加食材</h2>
                        <span>大部分用户使用了以下食材</span>
                    <ul>
                        <li v-for="(item,index) in obj.foodList" :key="index">
                            <input type="text" placeholder="食材：如猪头" v-model="item.title">
                            <input type="text" placeholder="用量：如50g" v-model="item.note">
                            <div class="del" @click="delFodd(index)"></div>
                        </li>
                    </ul>
                    <div class="uls_btn">
                        <div @click="delAll(0)">
                            清空
                        </div>
                        <div @click="addFood(0)">
                            添加食材
                        </div>
                    </div>
                </div>
                <div class="uls">
                    <h2>烹饪步骤</h2>
                    <div class="list" v-for="(item,index) in obj.imgList" :key="index">
                        <span>第{{(index+1)}}步</span>
                        <div class="list_con">
                            <input type="file" accept="image/*" @change="image(index,$event)" :id="['file'+index]">
                            <label :for="['file'+index]">上传照片</label>
                            <img :src="item.image" v-if="item.image != ''">
                        </div>
                        <div class="list_foot">
                            <input type="text" placeholder="步骤描述，越详细越好" v-model="item.content">
                        </div>
                    </div>
                    <div class="uls_btn">
                        <div @click="delAll(1)">
                            清空
                        </div>
                        <div @click="addFood(1)">
                            添加步骤
                        </div>
                    </div>
                </div>
                <div class="uls">
                    <h2>小贴士</h2>
                    <div class="tips">
                        <textarea placeholder="这道菜有哪些小技巧或者注意事项需要提醒大家" v-model="obj.tips"></textarea>
                    </div>
                </div>
                <div class="go">
                    <span @click="go">发布菜谱</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive } from '@vue/runtime-core'
import { useStore } from "../store/index";
import { useRouter } from 'vue-router'
export default {
    setup(){
            let router = useRouter()
            let store = useStore(); 
            let obj = reactive({
                titImg:'',//标题图片
                titTxt:'',//标题文本
                titStory:'',//菜谱故事
                hard:'',//菜谱难度
                time:'',//烹饪时长
                foodList:[
                    {
                        title:'',
                        note:''
                    }
                ],
                imgList:[
                    {
                        image:'',
                        content:'',
                        position:1
                    },
                    {
                        image:'',
                        content:'',
                        position:2
                    },
                    {
                        image:'',
                        content:'',
                        position:3
                    },
                ],
                tips:'',//小贴士
            })
            let ind = 3;
            function addFood(num) {//添加食材
                if(num == 0){
                    obj.foodList.push({
                        name: '',
                        number: ''
                    })

                }else if(num == 1){
                    ind += 1;
                    obj.imgList.push({
                        image: '',
                        content: '',
                        position: ind
                    })
                }
            }
            function delFodd(index) {//删除单个食材
                if(obj.foodList.length == 1){
                    return
                }
                obj.foodList.splice(index,1)
            }
            function delAll(num) {//删除全部食材
                if(num == 0){
                    obj.foodList = [{
                        name: '',
                        number: ''
                    }];

                }else if(num == 1){
                    ind = 3;
                    obj.imgList = [
                        {
                            image: '',
                            content: '',
                            position: 1
                        },
                        {
                            image: '',
                            content: '',
                            position: 2
                        },
                        {
                            image: '',
                            content: '',
                            position: 3
                        },
                    ];
                }
            }
            function image(index,e) {//加图片
                let img = e.target.files[0];
                console.log("img", img);
                var fr = new FileReader();
                fr.readAsDataURL(img);

                fr.onloadend = (event) => {

                    let img = event.target.result;

                    if(index == 'tit'){
                        obj.titImg = img;

                    }else{
                        obj.imgList[index].image = img
                        
                    }
                }
                console.log(index);
                console.log(obj);
            }
            function go() {
                store.person.result.recipe.title = obj.titTxt;
                store.person.result.recipe.photo_path = obj.titImg;
                store.person.result.recipe.cookstory = obj.titStory;
                store.person.result.recipe.major = obj.foodList;
                store.person.result.recipe.cookstep = obj.imgList;
                store.person.result.recipe.cook_difficulty_text = obj.hard;
                store.person.result.recipe.tips = obj.tips;
                
                
                store.wite.tit = obj.titTxt;
                store.wite.src = obj.titImg;
                
                    router.push({
                        path: '/about',
                        query: {
                            id:0
                        }
                    })
                

                
            }
            return {
                image,
                obj,
                addFood,
                delFodd,
                delAll,
                go
            }
        }
    }
</script>

<style lang="scss" scoped>
.edit{
    .head{
        padding: 16px;
        display: flex;
        justify-content: space-between;
        h1{
            font-size: 18px;
        }
    }
    .picture{
        min-height: 376px;
        background-color: #fafafa;
        position: relative;
        input{
            display: none;
        }
        label{
            line-height: 376px;
            color: #a0a0a0;
            font-size: 13px;
            text-align: center;
            display: block;
        }
        img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 10;
        }
    }
    .title{
        .tit_txt{
            display: flex;
            padding: 16px 16px 0 16px;
            input{
                flex: 1;
                padding: 12px;
                height: 18px;
                border: 0px;
                font-size: 16px;
                background-color: #fafafa;
            }
        }
        .tit_story{
            display: flex;
            padding: 16px 16px 0 16px;
            textarea {
                flex: 1;
                padding: 12px;
                height: 116px;
                border: 0px;
                font-size: 16px;
                background-color: #fafafa;
                resize: none;
            }
        }
        .grade{
            display: flex;
            padding: 16px;
            justify-content: space-between;
            &>div{
                width: 48%;
                display: flex;
                justify-content: space-between;
                span{
                    color: #9e9e9e;
                    font-size: 16px;
                    &::before{
                        margin-right: 8px;
                        content: "";
                        width: 24px;
                        height: 22px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
                select{
                    border: 0px;
                }
            }
            .hard{
                span{
                    &::before{
                        background: url('../assets/img_gu/DG.png') no-repeat;
                        background-size: 90%;
                    }
                }
            }
            .time{
                
                span{
                    &::before{
                        background: url('../assets/img_gu/OU.png') no-repeat;
                        background-size: 90%;
                    }
                }
            }
        }
    }
    .uls{
        padding: 16px 16px 0 16px;
            h2{
                font-size: 18px;
                color: #333;
                font-weight: normal;
            }
            &>span{
                color: #bbbbbb;
                font-size: 13px;
                padding: 12px 0;
                display: block;
            }
            ul{
                
                li{
                    display: flex;
                    padding: 16px 12px;
                    background-color: #fafafa;
                    justify-content: space-between;
                    margin-bottom: 8px;
                    input{
                        width: 40%;
                        border: 0px;
                        font-size: 15px;
                        background-color: #fafafa;
                    }
                    &>.del{
                        width: 16px;
                        height: 16px;
                        background: url('../assets/img_gu/98.png') no-repeat;
                        background-size: 100%;
                    }
                }
            }
            .uls_btn{
                display: flex;
                justify-content: space-between;
                padding: 16px 0;
                div{
                    width: 46%;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;
                    border-radius: 19px;
                    border: 2px solid #a2a2a2;
                    border: 2px solid #a2a2a2;
                    color: #a2a2a2;
                    font-size: 14px;
                }
            }
            .list{
                padding-top: 16px;
                .list_con{
                    min-height: 190px;
                    background-color: #fafafa;
                    position: relative;
                    &>span{
                        font-size: 15px;
                        color: #333;
                    }
                    img {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0px;
                        left: 0px;
                        z-index: 10;
                    }
                
                    input {
                        display: none;
                    }
        
                    label {
                        line-height: 190px;
                        color: #a0a0a0;
                        font-size: 13px;
                        text-align: center;
                        display: block;
                        &::before{
                            content: "";
                            width: 21px;
                            height: 21px;
                            display: inline-block;
                            vertical-align: middle;
                            background: url('../assets/img_gu/e_.png') no-repeat;
                            background-size: 100%;
                            margin-right: 8px;
                        }
                    }
                }
                .list_foot{
                    display: flex;
                    padding-top: 10px;
                
                    input {
                        flex: 1;
                        padding: 12px;
                        height: 18px;
                        border: 0px;
                        font-size: 16px;
                        background-color: #fafafa;
                    }
                }
            }
            .tips{
                display: flex;
                padding-top: 16px;
                textarea {
                    flex: 1;
                    padding: 12px;
                    height: 116px;
                    border: 0px;
                    font-size: 16px;
                    background-color: #fafafa;
                    resize: none;
                }

            }
        
    }
    .go{
        display: flex;
        padding: 16px;
        span{
            display: block;
            border-radius: 40px;
            background-color: #ffc533;
            border: 2px solid #febc11;
            flex: 1;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #333;
        }
    }
}
</style>